<template>
  <div>
    <!-- 渲染所有手机品牌 -->
    <div v-for="phone in btnfilteredPhones" :key="phone.name" class="vidrBig">
      <div class="vidrR">
        {{ phone.name }}
      </div>
      <div class="vidrL">
        <el-button
          @click="toggleVisibility(phone)"
          size="mini"
          type="danger"
          style="
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
          "
          >删除</el-button
        >
        {{ '￥' + phone.price }}
        <el-button
          v-if="pdhasSub(phone)"
          size="mini"
          type="warning"
          @click="noShowSub(phone)"
        >
          不展示子品牌
        </el-button>
        <!-- 添加展示子品牌的按钮 -->
        <el-button
          v-if="pdhasSub(phone) && !phone.isVisibleSub"
          size="mini"
          type="success"
          @click="showSub(phone)"
        >
          展示子品牌
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'typeShowOne',
  data () {
    return {
      phones: [
        {
          name: '是否为上市公司',
          price: '4999',
          discount: true,
          isVisible: true,
          haveSub: true,
          subBrands: '荣耀'
        }
      ]
    }
  },
  computed: {
    btnfilteredPhones () {
      return this.phones.filter(phone => phone.isVisible)
    },
    filteredPhones () {
      const subBrands = {
        华为: '荣耀',
        小米: '红米',
        OPPO: ['OnePlus', 'Realme'],
        vivo: 'iQOO'
      }
      let notOtherBrands = ['荣耀', '红米', 'OnePlus', 'Realme', 'iQOO']
      let mainBrands = this.phones
        .filter(phone => notOtherBrands.indexOf(phone.name) === -1)
        .map(phone => phone.name)
      // notOtherBrands.indexOf(phone.name) === -1，没有找到则返回 -1

      let filtered = [] // 存储最终要展示的手机品牌
      // 添加所有主品牌
      mainBrands.forEach(brand => {
        const phone = this.phones.find(p => p.name === brand)
        if (phone) {
          filtered.push(phone)
        }
      })

      // 添加符合条件的子品牌
      Object.entries(subBrands).forEach(([mainBrand, subBrandsList]) => {
        const mainBrandPhone = this.phones.find(p => p.name === mainBrand)
        if (mainBrandPhone && mainBrandPhone.discount) {
          // 如果主品牌有折扣，添加所有子品牌
          if (typeof subBrandsList === 'string') {
            const subBrandPhone = this.phones.find(
              p => p.name === subBrandsList
            )
            if (subBrandPhone) {
              filtered.push(subBrandPhone)
            }
          } else {
            // 对于有多个子品牌的，如OPPO
            subBrandsList.forEach(subBrand => {
              const subBrandPhone = this.phones.find(p => p.name === subBrand)
              if (subBrandPhone) {
                filtered.push(subBrandPhone)
              }
            })
          }
        }
      })

      return filtered
    }
  },
  methods: {
    // 删除品牌按钮
    toggleVisibility (phone) {
      phone.isVisible = !phone.isVisible
    },
    // 用来v-if判断是否存在子品牌
    pdhasSub (phone) {
      return phone.haveSub
    },
    // 通用方法，用于设置子品牌的isVisible属性
    toggleSubBrandsVisibility (phone, isVisible) {
      if (phone.haveSub) {
        if (typeof phone.subBrands === 'string') {
          const subBrandPhone = this.phones.find(
            p => p.name === phone.subBrands
          )
          /**
           *在 if (subBrandPhone) { subBrandPhone.isVisible = isVisible; }
           *这行代码中进行判断的原因是为了确保在尝试访问和修改 subBrandPhone.isVisible 属性之前，
           *subBrandPhone 确实存在。这是一个良好的编程实践，可以避免运行时错误。
           */
          if (subBrandPhone) {
            subBrandPhone.isVisible = isVisible
          }
        } else if (Array.isArray(phone.subBrands)) {
          phone.subBrands.forEach(subBrand => {
            const subBrandPhone = this.phones.find(p => p.name === subBrand)
            if (subBrandPhone) {
              subBrandPhone.isVisible = isVisible
            }
          })
        }
        console.log(
          `子品牌 ${phone.subBrands} 现在 ${isVisible ? '可见' : '不可见'}`
        )
      } else {
        console.log(`我 ${phone.name} 没有子品牌！`)
      }
    },

    // 展示子品牌
    showSub (phone) {
      this.toggleSubBrandsVisibility(phone, true)
    },

    // 隐藏子品牌
    noShowSub (phone) {
      this.toggleSubBrandsVisibility(phone, false)
    }
  }
}
</script>

<style lang="scss" scoped>
.vidrBig {
  display: flex;
  margin-bottom: 0;
}
.vidrBig .vidrR {
  display: flex;
  justify-content: center;
  width: 50%;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  background-color: #40bfff;
  cursor: pointer; /* 添加鼠标指针样式 */
}
.vidrBig .vidrL {
  width: 90%;
  height: 50px;
  padding: 0 10px;
  line-height: 50px;
  background-color: #ffffff;
  position: relative;
}
</style>
